<template>
	<view>
		<uni-nav-bar 
		left-icon="back" 
		statusBar 
		:border="false" 
		 @click-left="back">
			<view class="flex align-center justify-center w-100">
				所有人可见<text class="iconfont icon-shezhi"></text>
			</view>		
		</uni-nav-bar>
		<textarea v-model="content" placeholder="说一句话吧" class="uni-textarea px-2"/>
		<!-- 选中的分类 -->
		<view class="font-md px-2 py-1 flex">
			<view class="border px-3 py main-color main-border-color flex align-center justify-center" style="border-radius: 50rpx;">
				<text class="iconfont icon-huati mr-1"></text>
				分类：
			</view>
		</view>
		<view class="flex flex-wrap align-center py-3 border-bottom px-2">
			<view @click="openDetail(item)" :class="{'bg-main text-hover-danger':tabIndex===item.id,'bg-light text-secondary':tabIndex!==item.id}" 
			class="border mb-1 rounded mx-1 px-2 animate__animated animate__faster" 
			hover-class="animate__jello" 
			v-for="(item,index) in tabBars" 
			:key="index">{{item.name||item.title}}</view>
			
		</view>
		<upload-image ref="uploadImage" :show="show" :list="imageList" @change="changeImage"></upload-image>
		<view class="fixed-bottom bg-white flex align-center" style="height: 85rpx;">
			<view 
			class="iconfont icon-caidan footer-btn animate__animated" 
			hover-class="animate__pulse"></view>
			<view 
			class="iconfont icon-huati footer-btn animate__animated" 
			hover-class="animate__pulse"></view>
			<view 
			class="iconfont icon-tupian footer-btn animate__animated" 
			hover-class="animate__pulse" @click="iconClickEvent('uploadImage')"></view>
			
			<view  @click="SendOut()"
			class="bg-main text-white ml-auto flex justify-center align-center rounded mr-2 shadow-lg" 
			style="height: 60rpx; width: 140rpx;">发送</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar';
	import uploadImage from '@/components/common/upload-image';
	import {getAddSocial} from "@/network/home.js";
	export default{
		components:{
			uniNavBar,
			uploadImage
		},
		onLoad(e) {
			if(e){
				this.tabBars = JSON.parse(e.tabBars)
			}
			
		},
		created(){
			let value = uni.getStorageSync('add-input')
			if(!value){
				return
			}
			let result = JSON.parse(value)
			this.imageList = result.imageList
			this.content = result.content
		},
		data(){
			return{
				content:"",
				bool:false,
				tabIndex:null,
				imageList:[],
				tabBars:[],
				showBack:false
			}
		},
		// 监听返回
		onBackPress(){
			if(!this.showBack && (this.content!=='' || this.imageList.length > 0)){
				uni.showModal({
					content:'是否保存为草稿?',
					showCancel:true,
					cancelText:'不保存',
					confirmText:'保存',
					success:res=>{
						// 点击确定
						if(res.confirm){
							this.store()
							console.log('保存');
						}else{
							console.log('不保存')
							uni.removeStorage({
								key:"add-input"
							})
						}	
						this.back()
					}
				});
				this.showBack=true
				return true
			}
		},
		methods:{
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			store(){
				let obj = {
					content:this.content,
					imageList:this.imageList
				}
				uni.setStorage({
					key:"add-input",
					data:JSON.stringify(obj)
				})
			},
			changeImage(e){
				this.imageList = e
			},
			iconClickEvent(event){
				switch(event){
					case 'uploadImage':
						this.$refs.uploadImage.chooseImage();
						break;
				}
			},
			SendOut(){
				let that = this
				let data_list = {
					"title":this.content,
					"images":this.imageList,
					"create_date":new Date().toISOString(),
					
				}
				if(this.bool){
					data_list['topic'] = this.tabIndex
				}else{
					data_list['status'] = this.tabIndex
				}
				console.log(data_list)
				uni.showLoading({
				    title: '加载中'
				});
				
				getAddSocial(data_list).then(attr=>{
					let [err,res] = attr
					if(res.statusCode==201){
						setTimeout(function () {
						    uni.hideLoading();
							that.showBack=true
							that.back()
						}, 2000);
					}else{
						uni.hideLoading();
						console.log(res.data)
						uni.showToast({
							title: res.data.images?.[0] ?? "标题不能为空",
							icon: 'success',	
							duration: 1000
						})
					}
					console.log(res)
				})
			},
			openDetail(item){
				if(item.status){
					this.bool = true
				}
				this.tabIndex = item.id
				console.log(item)
			}
		},
		computed:{
			show(){
				return this.imageList.length > 0
			}
		}
	}
</script>
	
<style>
	.footer-btn{
		width: 86rpx;
		height: 86rpx;
		display: flex;
		justify-content: center;
		align-content: center;
		font-size: 50rpx;
	}
</style>
